<template>
  <div class="app">
    <div class="header">
      <div class="user-wrap">
        <div class="user-avatar"></div>
        <div class="user-info">
          <h2 class="user-info-title">
            My name is {{ userInfo.name }}
            <small>asdasdsad</small>
          </h2>
          <p><span>D.O.B</span>26514-6524</p>
          <p><span>PHONE</span>{{ userInfo.phone }}</p>
          <p><span>ADDRESS</span>{{ userInfo.addr }}</p>
          <p><span>E-MAIL</span>{{ userInfo.email }}</p>
        </div>
      </div>
    </div>
    <div class="nav">
      <ul class="nav-list">
        <li class="nav-list-item"><a href="#about">About</a></li>
        <li class="nav-list-item"><a href="#experience">Experience</a></li>
        <li class="nav-list-item"><a href="#education">Education</a></li>
        <li class="nav-list-item"><a href="#skills">Skills</a></li>
        <li class="nav-list-item"><a href="#project">MyProject</a></li>
        <li class="nav-list-item"><a href="">Contact</a></li>
      </ul>
    </div>
    <!-- {{ msg }} -->
    <about v-bind:infomation="infomation"></about> 
    <experience v-bind:workerList="workerList"></experience>
    <education v-bind:educationList="educationList"></education>
    <skills></skills>
    <projects></projects>
    <!-- <csstest></csstest> -->
    <div class="footer">
      © 2017 My Resume. All rights reserved | Design by Mr.chen
    </div>
  </div>
</template>

<script>
  import About from './about.vue';
  import Experience from './experience.vue';
  import Education from './education.vue';
  import Skills from './skills.vue';
  import Projects from './projects.vue';
  import Csstest from './csstest.vue';
  import axios from 'axios';
  // import userInfo from '../../data/dataBase';

  export default {
    components: { About, Experience, Education, Skills, Projects, Csstest },
    data() {
      return {
        userInfo: { name: '谌大大', phone: '15759582737', addr: '福建省宁德市蕉城区', email: '724921588@qq.com'},
        infomation: { content: 'dasdasdassdassdassdasdasdd'},
        workerList: [
          { date: '2015-2016', name: '创企科技', content: '创企科技创企科技创企科技创企科技创企科技'},
          { date: '2016-2017', name: '最美科技', content: '最美科技最美科技最美科技最美科技'},
          { date: '2018-2019', name: '创企科技', content: '信息与计算科学3'},
        ],
        educationList: [
          { date: '2016.6.6', name: '闽南理工', content: '信息与计算科学'},
          { date: '2017.6.6', name: '闽南理工2', content: '信息与计算科学1'},
          { date: '2017.6.9', name: '闽南理工4', content: '信息与计算科学3'},
        ],
        msg: {}
      }
    },
    methods: {
      get: function () {
        axios.get('../../data/db.json', {
          params: { userId: '1111'},
          headers: { token: 'jack'}
        })
        .then(res => this.msg = res.data.result)
        .catch(error => {});
      },

      post: function() {
        axios.post('../../data/db.json', {
          userId: 8888,
        }, {
          headers: {
            'content-type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'token': 'tom'
          }
        })
        .then(res => this.msg = res.data.result)
      },

      http: function() {
        axios({
          url: '../../data/db.json',
          method: 'get',
          data: { user: 111 },
          headers: {
            token: 'http-test'
          }
        })
        .then(res => this.msg = res.data.result)
      },

      /*
        @resolve 请求成功参数
        @reject 请求出错参数
      */
      promise: function() {
        return new Promise(function(resolve, reject) {
           let flag = document.cookie.indexOf('userId') != -1 ? true : false;
           if (flag = true) {
             resolve({
               stauts: 0,
               result:true
             });
           } else {
             reject('error');
           }
        });
      },
      promise1: () => {
        return new Promise((resolve, reject) => {
          let userInfo = {
            userID: 1
          };
          resolve(userInfo)
        });
      }
    },
    mounted: function() {
      // 全局请求前拦截
      axios.interceptors.request.use(function(config) {
        console.log('config get')
        return config;
      });

      // 全局响应后拦截
      axios.interceptors.response.use(function(response) {
        console.log('config response')
        return response;
      });


      this.get();
      // this.post();
      // this.http();

      this.promise()
      .then(res => {
        if (res.stauts == 0) {
          console.log(`success：${res.result}`);
        }
      }).catch(error => {
        console.log(`error：${error}`);
      });

      // 多个请求
      Promise.all([this.promise(), this.promise1()]).then(([res1, res2]) => {
        console.log(`res1：${res1.result}`);
        console.log(`res2：${res2.userID}`);
      }).catch(error => {
        console.log(error)
      });
    }
  }
</script>

<style>
  :root {
    --green: #018b8d;
    --fontStyle: 'Overlock', cursive;
  }
  .app {
    width: 100%;
    height: 100%;
  }
  .header {
    width: 100%;
    padding: 3.6em 0;
    background: url(../images/a.jpg) no-repeat;
    background-size: 100%;
  }
  .user-wrap {
    position: relative;
    width: 1170px;
    margin: 0 auto;
  }
  .user-wrap::before {
    display: table;
    content: '';
  }
  .user-avatar {
    width: 350px;
    height: 350px;
    border: 2px solid #fff;
    background: url(../images/test.jpg) no-repeat;
    background-size: 100;
  }
  .user-info {
    position: absolute;
    top: 0;
    right: 0;
  }
  .user-info > p {
    padding: 15px 0;
    color: #fff;
  }
  .user-info > p > span {
    display: inline-block;
    width: 100px;
  }
  .user-info-title {
    display: inline-block;
    width: 764px;
    padding: 70px 0 30px 0;
    color: #fff;
    border-bottom: 1px solid #ccc;
  }
  .user-info-title > small {
    display: block;
    width: 100%;
  }
  .nav {
    height: 60px;
    line-height: 60px;
    background: var(--green);
  }
  .nav-list {
    width: 1170px;
    margin: 0 auto;
    padding: 0 100px;
  }
  .nav-list-item {
    display: inline-block;
  }
  .nav-list-item > a {
    padding: 1em 2em;
    text-decoration: none;
    color: #fff;
    font-family: var(--fontStyle);
  }
  .nav-list-item > a:hover {
    text-decoration: none;
    color: var(--green);
    font-family: unset;
    background: #fff;
  }
  .footer {
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: #fff;
    background: #1f1f1f;
  }
</style>